<template>
    <div class="activity h-100">
        <elewarp>
            <span slot="search-header">数据筛选</span>
            <el-input slot="search" placeholder="请输入内容" v-model.trim="bA_Name" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchHandler"></el-button>
            </el-input>
            <div slot="table-header">
                <el-button @click="addStudyInfo" style="float: right; margin-right:10px;" type="primary">发布</el-button>
            </div>
            <div slot="table">
                <ul class="card-list">
                    <li class="card-item" style="margin-bottom:20px;"  v-for="(item, index) in lists" :key="index">
                        <el-card :body-style="{ padding: '0px' }" class="clearfix" shadow="never">
                            <img @click="lookinfo(item)" width="300px" height="168px" :src="item.A_Photo" class="image pointer fl">
                            <div class="fl item-middle pointer"  @click="lookinfo(item)">
                                <h3>主题：{{item.A_Name}}</h3>
                                <div class="content" v-html="item.A_Content"></div>
                                <div>
                                    <span>{{item.A_Username}}</span>
                                    <div class="line"></div>
                                    <i class="el-icon-star-off pointer"></i>
                                </div>
                            </div>
                            <div class="fr item-right">
                                <p class="t-c">{{item.A_Time}}</p>
                                <div>
                                    <el-button title="删除" @click="handleClickdelete(item)"  class="button"><i class="el-icon-delete"></i>删除</el-button>
                                    <el-button title="编辑" @click="handleClickedit(item)" class="button"><i class="el-icon-edit"></i>编辑</el-button>
                                </div>
                            </div>
                        </el-card>
                    </li>
                </ul>
                <div class="bottom-pages clearfix">
                    <div class="fr">
                        <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[9, 15, 21, 30]"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next"
                        :total="count">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </elewarp>
        <!-- <ele-add-study ref="addstudy"></ele-add-study> -->
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'

import {getactivityList,deletactivityList} from '@/api/index.js'
export default {
    name: 'center',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            bA_Name:"",
            lists:[],
            count:0,
            pageSize:10,
            currentPage:1,
            tableSelection:[]
        }
    },
    created(){
        this._getActivityList()
    },
    computed:{
        teacherList() {
            return this.$store.state.allTeacherList;
        }
    },
    filters:{
        getTeacherName(val,data) {
            for (let i = 0; i < data.length; i++) {
                if(val == data[i].TID){
                    return data[i].T_Name;
                }
            }
            return '未知'
        }
    },
    methods:{
        onReset(){
            this.bA_Name = "";
        },
        searchHandler(row){
            this._getActivityList()
        },
        _getActivityList() {
            let params = {
                bA_Name:this.bA_Name,
                bPage:(this.currentPage - 1) * this.pageSize + 1,
                bPage1:this.currentPage * this.pageSize,
                bSort:'',
                bSx:''
            }
            getactivityList(params).then((res) => {
                if(res) {
                    this.lists = res.tableData;
                    this.count = res.total_rows;
                }
            })
        },
        handleSizeChange(val){
            this.pageSize = val;
            this._getActivityList()
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this._getActivityList()
        },
        // 编辑
        handleClickedit(row){
            this.$router.push({path:'/activity/activity-add',query:{id:row.AID}})
        },
        lookinfo(row) {
            this.$router.push({path:'/activity/activity-des',query:{id:row.AID}})
        },
        // 删除
        handleClickdelete(row){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                deletactivityList({bAID:row.AID}).then((res) => {
                    if(res) {
                        this.$util.tipsMsg('success','删除成功！');
                        this._getActivityList()
                    }
                })
            }).catch((err) => {
                console.log(err)
            })
        },
        // 添加
        addStudyInfo(){
            this.$router.push({path:'/activity/activity-add'})
        }
    }
}
</script>
<style lang="less">
.activity{
    .card-list{
        .el-card__body{
            height: 168px;
            box-sizing: border-box;
        }
        .card-item{
            h3{
                font-weight: 600;
                font-size: 24px;
                margin-bottom: 10px;
            }
            .item-middle{
                padding-top:10px;
                margin-left:20px;
                height: 100%;
                box-sizing: border-box;
                width: 50%;
                .content{
                    font-size: 14px;
                    color:#bbb;
                    height: 60px;
                    margin-bottom: 10px;
                    overflow: auto;
                }
                .line{
                    display: inline-block;
                    height: 16px;
                    border-right: 2px solid #ccc;
                    margin:0 20px;
                }
            }
            .item-right{
                padding-top:10px;
                margin-right: 10px;
                p{
                    margin-bottom: 90px;
                    color:#bbb;
                }
            }
        }
    }
}

</style>
